import React, { useEffect, useState } from "react";
import baseaxiso from "../../../../axios/config";
import { Button, Form, Input,  Table , message } from "antd";
import type { ColumnsType } from "antd/es/table";
import axios from "axios";
import dayjs from "dayjs";
//声明接口
interface DataType {
  id: number;
  name: string;
  lenger: number;
  status: string;
  remote: string;
  time: string;
}
//自定义列
const columns: ColumnsType<DataType> = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "区块高度",
    dataIndex: "lenger",
    key: "lenger",
  },
  {
    title: "节点状态",
    key: "status",
    dataIndex: "status",
  },
  {
    title: "ip地址",
    
    dataIndex: "cloud",
  },
  {
    title: "端口状态",
    key: "port",
    dataIndex: "port",
  },
  {
    title: "远程码",
    key: "remote",
    dataIndex: "remote",
  },
  {
    title: "安装时间",
    key: "time",
    dataIndex: "time",
    render:(time:string)=>{
      return  dayjs(time).format("YYYY-MM-DD hh:mm:ss")
    }
    
  },
];

const Ab: React.FC = () => {
  /* 定义数据 */
  const [data, setdata] = useState([]);
  const [ipt, setipt] = useState("");
  const [gf, setgf] = useState("");
  const [d, setd] = useState("");
  const [e, sete] = useState("");
  //查询新作节点数量
  const [f, setf] = useState("");
  //查询总节点数量
  const [c, setc] = useState("");
  //查询正常节点数量
  const [g, setg] = useState("");
  //查询延迟作节点数量
  const [a1, seta1] = useState("");
  //查询掉线作节点数量
  const [b1, setb1] = useState("");

  // 延迟60秒   获取后台一次数据
  useEffect(() => {
    const settimie = setTimeout(() => {
      baseaxiso
        .get("/xiaobao/query")
        .then((res) => {
          setdata(res.data);
          console.log(res.data)
        })
        .catch((err) => {
          message.error("获取后台数据失败");
        });
    }, 60000);
    return () => clearTimeout(settimie);
  });

  /* 节点总数  "/query/z"*/
  baseaxiso
    .get("/xiaobao/query/z")
    .then((res) => {
      const rdata = res.data;
      if (Object.keys(rdata).length === 0) {
        setc("0");
      } else {
        for (let k in rdata) {
          setc(rdata[k].count);
        }
      }
    })
    .catch((err) => {
      message.error("查询总节点数量失败");
    });

  // 正常    "/query/c"*/
  baseaxiso
    .get("/xiaobao/query/c")
    .then((res) => {
      const rdata = res.data;

      if (Object.keys(rdata).length === 0) {
        setg("0");
      } else {
        for (let k in rdata) {
          setg(rdata[k].count);
        }
      }
    })
    .catch((err) => {
      message.error("查询正常节点数量失败");
    });

  //  新作 */   x
  baseaxiso
    .get("/xiaobao/query/x")
    .then((res) => {
      const rdata = res.data;
      if (Object.keys(rdata).length === 0) {
        setf("0");
      } else {
        for (let k in rdata) {
          setf(rdata[k].count);
        }
      }
    })
    .catch((err) => {
      message.error("查询新作节点数量失败");
    });
  // 掉线 */   d
  baseaxiso
    .get("/xiaobao/query/d")
    .then((res) => {
      const rdata = res.data;
      if (Object.keys(rdata).length === 0) {
        setb1("0");
      } else {
        for (let k in rdata) {
          setb1(rdata[k].count);
        }
      }
    })
    .catch((err) => {
      message.error("查询掉线节点数量失败");
    });
  // 延迟 */  y
  baseaxiso
    .get("/xiaobao/query/y")
    .then((res) => {
      const rdata = res.data;
      if (Object.keys(rdata).length === 0) {
        seta1("0");
      } else {
        for (let k in rdata) {
          seta1(rdata[k].count);
        }
      }
    })
    .catch((err) => {
      message.error("查询延迟节点数量失败");
    });
  //  获取官方数据 */gf
  baseaxiso
    .get("/gf")
    .then((res) => {
      setgf(res.data);
    })
    .catch((err) => {
     
    });


  /* 获取输入框中的值 */
  const abc = (e: any) => {
    setipt(e.target.value);
    console.log(e.target.value);
  };
  /* 通过按钮查询数据 */ /* 通过按钮查询数据 */

  const abc1 = () => {
    axios
      .get(`http://www.abao-node.cn:300/xiaobao/query/${ipt}`)
      .then((res) => {
        setdata(res.data);
        const sourdata = res.data
        sourdata.sort()
      })
      .catch((err) => {
        message.error("查询失败");
      });
  };
  const qq = () => {
   
  };
  return (
    <>
    <h1>小宝节点网络工作室</h1>
      <div style={{ textAlign: "center" }}>
        <span style={{ margin: 10 }}>官方区块高度：{gf}</span>
        <span style={{ margin: 10 }}>节点总数量:{c}台</span>
        <span style={{ margin: 10 }}>正常：{g}台</span>
        <span style={{ margin: 10 }}>延迟：{a1}台</span>
        <span style={{ margin: 10 }}>掉线：{b1}台</span>
        <span style={{ margin: 10 }}>新作：{f}台</span>
      </div>
      <div>
        <Form onFinish={qq}>
          名字：
          <Input value={ipt} onChange={abc} style={{ width: 150 }}></Input>
          <Button type="primary" onClick={abc1}>
            查询
          </Button>
        </Form>
      </div>

      <Table columns={columns} dataSource={data} />
    </>
  );
};

export default Ab;

